<template>
  <view class="record">
    <scroll-view @scrolltolower="scrolltolower" class="scrollView" refresher-background="rgba(0, 0, 0, 0)" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh" @refresherrestore="onRestore" :style="{'height':  'calc('+ screenHeight  +'px' +' ' + '-' +' ' + excessHeight +'rpx)'}" scroll-y="true">
      <view v-for="(item,index) in list" :key="index" class="part">
        <view class="row">
          <text class="row-left">
            用户昵称
          </text>
          <text class="row-right">
            {{item.nickname}}
          </text>
        </view>
        <view class="row">
          <text class="row-left">
            购买种类
          </text>
          <text class="row-right">
            {{item.remark}}
          </text>
        </view>
        <view class="row">
          <text class="row-left">
            购买时间
          </text>
          <text class="row-right">
            {{item.createtime}}
          </text>
        </view>
      </view>
      <view class="nodata-st" v-if="form.page==form.last_page"> ------没有更多数据了------</view>
      <view class="nodata-st" v-if="list.length ==0"> ------暂无数据------</view>

      <view :style="'height:'+safeAreaBottom+'px'">

      </view>

    </scroll-view>
  </view>
</template>

<script>

import api from '@/api/index.js'
export default {
  data() {
    return {
      excessHeight: 236,
      safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
      screenHeight: uni.getStorageSync('screenHeight') - uni.getStorageSync('safeAreaBottom'),
      triggered: true,
      list: [],
      form: {
        page: 1,
        page_size: 10,
        last_page: 0,
      },
    }
  },
  onLoad(options) {
    this.init()
  },
  methods: {
    init() {

      this.form.page = 1;
      this.form.last_page = 0;
      this.getpage()
    },
    getpage() {
      api.base.getInviteList(this.form).then(res => {
        if (res.code == 1) {
          this.list = this.form.page === 1 ? res.data.data : this.list.concat(res.data.data);
          this.form.last_page = res.data.last_page;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      setTimeout(() => {
        this.init()
        this.triggered = false;
        this._freshing = false;
      }, 1000)
    },
    onRestore() {
      this.triggered = 'restore'; // 需要重置
      console.log("onRestore");
    },
    scrolltolower() {
      if (this.form.page < this.form.last_page) {
        this.form.page += 1;
        this.getpage();
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.record {
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: center;
  padding-bottom: 24rpx;
  padding-top: 24rpx;
  height: 100vh;
  .part {
    margin: 0rpx 32rpx 32rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 216rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 1rpx 24rpx 24rpx 24rpx;
    box-sizing: border-box;

    .row {
      height: 40rpx;
      margin-top: 24rpx;

      &-left {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      &-right {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        margin-left: 32rpx;
      }
    }
  }
}
</style>